<template>
  <div class="process-container">
    <div class="process-content watermarked-content">
      <div class="process-header">
        <img :src="logo" class="w20px h20px" />
        <router-link to="/"><span class="title">青鸾兼职</span></router-link>
      </div>
      <!-- 步骤条 -->
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step title="填写基本信息" />
        <el-step title="设置密码" />
        <el-step title="确认提交" />
      </el-steps>

      <!-- 动态步骤内容 -->
      <div class="step-content">
        <component :is="currentComponent" @complete="handleStepComplete" @prev="handlePrevStep" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import Form from "@/views/register/form/index.vue";
import Mail from "@/views/register/password/index.vue";
import Submit from "@/views/register/submit/index.vue";
import logo from "@/assets/logo.png";

const route = useRoute();
const router = useRouter();

// 当前步骤（从路由参数获取）
const currentStep = computed(() => parseInt(route.params.id) || 1);

// 根据步骤动态加载组件
const stepComponents = {
  1: Form,
  2: Mail,
  3: Submit,
};

const currentComponent = computed(() => stepComponents[currentStep.value]);

// 处理步骤完成事件
const handleStepComplete = (stepData) => {
  // 跳转到下一步
  if (currentStep.value < 3 && stepData.success) {
    router.push(`/register/${currentStep.value + 1}`);
  }
};

// 处理上一步
const handlePrevStep = () => {
  if (currentStep.value > 1) {
    router.push(`/register/${currentStep.value - 1}`);
  }
};

// 水印配置
const watermarkText = ref("青鸾兼职-注册");
const watermarkColor = ref("#3498db");
const opacity = ref(30);
const fontSize = ref(24);
const angle = ref(30);
const density = ref("medium");

// 创建水印
const createWatermark = () => {
  // 移除旧的水印
  const oldWatermark = document.querySelector(".watermark-overlay");
  if (oldWatermark) oldWatermark.remove();

  // 创建Canvas
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  // 根据密度设置Canvas大小
  let canvasWidth, canvasHeight;
  switch (density.value) {
    case "high":
      canvasWidth = 300;
      canvasHeight = 200;
      break;
    case "medium":
      canvasWidth = 400;
      canvasHeight = 300;
      break;
    case "low":
      canvasWidth = 500;
      canvasHeight = 400;
      break;
  }

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);

  // 设置字体
  ctx.font = `bold ${fontSize.value}px Arial`;
  ctx.fillStyle = watermarkColor.value;
  ctx.globalAlpha = opacity.value / 100;

  // 旋转画布
  ctx.translate(canvasWidth / 2, canvasHeight / 2);
  ctx.rotate((-angle.value * Math.PI) / 180);
  ctx.translate(-canvasWidth / 2, -canvasHeight / 2);

  // 计算文本位置
  const textWidth = ctx.measureText(watermarkText.value).width;
  const x = (canvasWidth - textWidth) / 2;
  const y = canvasHeight / 2 + fontSize.value / 3;

  // 绘制文本
  ctx.fillText(watermarkText.value, x, y);

  // 创建水印层
  const watermark = document.createElement("div");
  watermark.className = "watermark-overlay";
  watermark.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            background-image: url(${canvas.toDataURL("image/png")});
            background-repeat: repeat;
            opacity: ${opacity.value / 100};
          `;

  // 添加到内容区域
  const content = document.querySelector(".watermarked-content");

  content.appendChild(watermark);

  // 添加安全保护
  protectWatermark(watermark);
};

// 保护水印不被移除
const protectWatermark = (watermark) => {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.removedNodes.length) {
        mutation.removedNodes.forEach((node) => {
          if (node === watermark) {
            console.log("检测到水印被移除，重新添加");
            document.querySelector(".watermarked-content").appendChild(watermark);
          }
        });
      }

      if (mutation.attributeName === "style") {
        console.log("检测到水印样式被修改，重置样式");
        watermark.setAttribute("style", watermark.style.cssText);
      }
    });
  });

  observer.observe(watermark.parentNode, {
    childList: true,
    attributes: true,
    subtree: false,
  });
};

onMounted(() => {
  createWatermark();
});
</script>

<style scoped>
.process-container {
  min-height: 100%;
  min-width: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  justify-content: center;
  padding: 20px;

  .process-header {
    height: 50px;
    display: flex;
    justify-content: center;
    .title {
      font-size: 18px;
      font: bolder;
    }
  }

  .process-content {
    background-color: white;
    min-width: 800px;
    border-radius: 20px;
    padding: 40px;
  }
}
</style>
